<template>
	<view class="mine-page">
		<view class="user-profile">
			<view class="advator">
				<img :src="userInfo.avatarUrl" width="48px" height="48px" alt="" />
			</view>
			<text class="phone">{{ userInfo.nickName }}</text>
		</view>
		<view class="user-level">
			<view>
				<text>服务时长： {{userDetails.serverTime === null || userDetails.serverTime === "" ? 0 : userDetails.serverTime}}</text>
				<!-- 				<text>|</text>
				<text>等级 1</text> -->
			</view>
		</view>
		<!-- 		<view class="qr-code">
			<text>出示我的二维码</text>
		</view> -->
		<view class="view-card">
			<view class="header">
				<text class="title">我的时间币</text>
				<text class="detail" @click="toDetail()">看详情></text>
			</view>
			<view class="content">
				<view class="content-item">
					<text class="number">{{userDetails.money}}</text>
					<text class="name">总额</text>
				</view>
			</view>
		</view>
		<view class="view-card">
			<view class="header">
				<text>常用功能</text>
			</view>
			<view class="content">
				<view class="content-item" @click="toIdentification()">
					<icon type="success" size="48"></icon>
					<text class="icon-name">身份认证</text>
				</view>
				<view class="content-item" @click="toAbout()">
					<icon type="success" size="48"></icon>
					<text class="icon-name">关于我们</text>
				</view>
				<view class="content-item" @click="toFeedback()">
					<icon type="success" size="48"></icon>
					<text class="icon-name">我要反馈</text>
				</view>
			</view>
		</view>

		<view class="view-card">
			<view class="points_mall">
				<view>
					<text>积分商城</text>
				</view>
				<view class="product_list">
					<view
						v-for="(item, index) in productList"
						:key="index"
						class="product_item"
						@click="toProductDetail(item.productId)"
					>
						<view>
							<image :src="getImageUrl(item.img)"></image>
							<!-- <view class="service_type">{{item.type==0? "权益":"推荐"}}</view> -->
						</view>
						<view class="product_title">{{item.title}}</view>
						<view class="product_bottom">
							<view class="product_inventory">库存：{{item.inventory}}</view>
							<view class="product_money">积分：{{item.money}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import { getUserInfo } from '@/api/mine'
	
	export default {
		components: {},
		data() {
			return {
				userInfo: {},
				param:{},
				productList:[],
				userDetails:{}
			};
		},
		onLoad() {
			if(uni.getStorageSync('token') === null || uni.getStorageSync('token') == ""){
				uni.redirectTo({
					url:"/pages/login/index"
				})
			} else {
				const token = uni.getStorageSync('token')
				this.userInfo = uni.getStorageSync("userInfo");
				if (!this.userInfo) {
					this.getUserProfile()
				}
			}
		},
		onShow() {
			this.getUserDetails();
			this.getProductList()
		},
		methods: {
			getUserProfile() {
				const that = this;
				uni.showModal({
					title: "提示",
					content: "授权微信登录后才能正常使用小程序功能",
					success: function(res) {
						if (res.confirm) {
							uni.getUserProfile({
								desc: "获取你的昵称、头像、地区及性别", // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
								success: (res) => {
									that.userInfo = res.userInfo
									console.log("userInfo:",res.userInfo);
									uni.setStorageSync('userInfo', res.userInfo)
									that.hasUserInfo = true
								},
								fail: (error) => {
									console.error(error);
								},
							});
						}
					},
				});
			},
			toDetail() {
				wx.navigateTo({
					url: '/pages/mine/detail'
				})
			},
			toUserDetail() {
				wx.navigateTo({
					url: '/pages/mine/user/index'
				})
			},
			toIdentification() {
				wx.navigateTo({
					url: '/pages/mine/identification/form'
				})
			},
			toFeedback()  {
				wx.navigateTo({
					url: '/pages/mine/feedback/feedback'
				})
			},
			toProductDetail(id) {
				console.debug(id)
				wx.navigateTo({
					url: '/pages/mine/product-detail/product-detail?productId='+ id
				})
			},
			getImageUrl(src){
				return this.domain + src;
			},
			getUserDetails() {
				const token = uni.getStorageSync('token')
			    getUserInfo({ token }).then(res => {
			      if (res.data) {
			        this.userDetails = res.data
					console.log("userDetails:",this.userDetails)
			      }
			    })
			},
			  
			getProductList() {
				this.param.token = uni.getStorageSync("token");
				this.http.get({
					url: '/index.php/Wxapp/Product/getlist',
					data: this.param
				}).then(resp => {
					this.productList = resp.data;
				}).catch(err => {
					console.error("消息列表失败：", err)
				})
			},
			toAbout() {
				uni.navigateTo({ url: '/pages/mine/about' })
			}
		},
	};
</script>

<style lang="scss" scoped>
	.mine-page {
		min-height: 100vh;
		height: 100%;
		width: 100vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10px;
		background: linear-gradient(to bottom, #ffecd2, #fcb69f);

		.user-profile {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;

			.phone {
				margin-left: 15px;
				color: #222;
			}
		}
	}

	.advator {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background: #ccc;
		overflow: hidden;

		img {
			width: 48px;
			height: 48px;
		}
	}

	.user-level {
		width: 100%;
		height: 24px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;

		view {
			display: flex;
			justify-content: space-between;
			padding: 0px 15px;
			width: 60%;
			background: #fff;
			border-radius: 12px;
		}
	}

	.qr-code {
		width: 95%;
		height: 30px;
		margin-top: 15px;
		border-radius: 4px;
		background: orange;
		display: flex;
		justify-content: center;
		align-items: center;

		text {
			line-height: 30px;
			color: #fff;
			font-size: 14px;
		}
	}

	.view-card {
		width: 100%;
		height: auto;
		margin-top: 10px;
		padding: 15px;
		background: #fff;
		border-radius: 4px;

		.header {
			width: 100%;
			height: 30px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-size: 18px;

			.title {
				color: #222;
				font-weight: bold;
			}

			.detail {
				color: #ccc;
				font-size: 16px;
			}
		}

		.content {
			width: 100%;
			height: auto;
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			flex-wrap: wrap;

			.content-item {
				width: 30%;
				height: 80px;
				margin-top: 10px;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				font-size: 14px;

				.number {
					color: #222;
				}

				.name {
					color: #ccc;
				}

				.icon-name {
					color: #222;
				}
			}
		}
		
		.product_list{
			display: flex; //一行显示
			flex-wrap: wrap;
			justify-content: space-between;
			.product_item{
			 	width: 49%;
				margin-top: 20rpx;
				font-size: 25rpx;
				
				image{
					height: 280rpx;
				}
			
				.product_title{
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					justify-content: center;
					margin-top: 8rpx;
					font-size: 28rpx;
					font-weight: bold;
				}
				.product_bottom{
					margin-top: 5rpx;
					display: flex;
					justify-content: space-between;
					padding: 0 8rpx;
					// product_date
					.product_money {
						color: #E43D33;
					}
				}
			}
		}
		

		

	}
</style>
